<template>
  <div class="os-main">
    <ConfigForm v-model="dataForm" :config="config" ref="configFormRef" />

    <el-button type="primary" @click="openJson">查看表单数据</el-button>

    <el-drawer v-model="drawerVisiable" title="数据视图" :direction="'rtl'" size="40%">
      <CodeView :code-json="JSON.stringify(dataForm, null, '\t')"></CodeView>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup>
import type { Config } from '@/components/ConfigForm'
import { ref } from 'vue';
import CodeView from '@/components/CodeView/index.vue'
import ConfigForm from '@/components/ConfigForm/index'

const shortcuts = [
  {
    text: '今天',
    value: new Date(),
  },
  {
    text: '昨天',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: '上周',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
]
const rangeShortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: '最近一月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: '最近三月',
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]
const disabledDate = (time: Date) => {
  return time.getTime() > Date.now()
}
const defaultTime = new Date()
const defaultTimeRange = [
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 1, 1, 23, 59, 59)
]
/**ConfigForm绑定对象 */
const dataForm = ref<ObjectAny>({})

/**ConfigForm配置 */
const config = ref<Config>({
  mode: 'add',
  formProps: {},
  rowProps: {},
  columns: [
    { prop: 'demo1', label: '基础用法', type: 'datePicker', props: { type: 'datetime', valueFormat: "YYYY-MM-DD HH:mm:ss" } },
    {
      prop: 'demo2', label: '复合用法', type: 'datePicker',
      props: { type: 'datetime', valueFormat: "YYYY-MM-DD HH:mm:ss", shortcuts, disabledDate, defaultTime }
    },
    { // 日期和时间范围
      prop: 'demo3', label: '日期和时间范围', type: 'datePicker',
      props: {
        type: 'datetimerange',
        valueFormat: "YYYY-MM-DD HH:mm:ss",
        shortcuts: rangeShortcuts,
        disabledDate,
        defaultTime: defaultTimeRange,
        rangeSeparator: '至',
        startPlaceholder: '开始日期',
        endPlaceholder: '结束日期'
      }
    },
  ]
})

// 数据视图
const drawerVisiable = ref(false)
const openJson = () => {
  drawerVisiable.value = true
}
</script>